{% extends 'mbase.html' %}
{% block title %}Store::Brispon{% endblock %}
{% block stylesheet %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />
<style type="text/css">
#map_canvas {
    width: 500px;
    height: 300px;
}
.gradient {
    background:#fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eaeaea));
    background: -moz-linear-gradient(top, #fff, #eaeaea);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eaeaea);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eaeaea)";
}
.shadow-all { 
    -moz-box-shadow: 0px 2px 4px #999;
    -webkit-box-shadow: 0px 2px 4px #999;
    box-shadow: 0px 2px 4px #999;
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=160, Color='#999999')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=160, Color='#999999');*/
}
.item { 
    padding:1em; 
    margin:0 0 2em;
}
#sidebar a.url {
     word-wrap: break-word; 
}
#sidebar {
    height:200px; 
    width:150px;
    background:#f4f4f4;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
     border-radius:5px;
     -moz-box-shadow: 0 0 20px #777;
     -webkit-box-shadow: 0 0 20px #777;
     border: 5px solid #fff;
     display:block;
     padding:1em;
     margin:1em;
}
</style>
{% endblock%}

{% block javascript %}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="{% url base_static "js/m/jquery.ui.map.js" %}"></script>
<script type="text/javascript" src="{% url base_static "js/m/jquery.ui.map.extensions.js" %}"></script>
<script type="text/javascript" src="{% url base_static "js/m/jquery.ui.map.services.js" %}"></script>
<script type="text/javascript">
$(function(){
    var centerLatlng = new google.maps.LatLng({{ store.y }}, {{ store.x }}-0.0045);
    var latlng = new google.maps.LatLng({{ store.y }}, {{ store.x }});
    $('#map_canvas').gmap({'zoom':15, 'center': centerLatlng}).bind('init', function(ev, map) {
        $('#map_canvas').gmap('addMarker', {'position': latlng, 'bounds': false}).click(function() {
            //$('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!' }, this);
        });
        $('#map_canvas').gmap('addControl', 'sidebar', 1);
        
    });
});
</script>
{% endblock%}

{% block content %}

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<ul>
  <li>
	<img src="{{ store.logo }}" width="100" height="100" />{{ store.name }} | {{ store.get_category_display }}
	<div class="fb-like" data-href="http://202.126.104.188/brispone/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>
	<a href="https://twitter.com/brispon" class="twitter-follow-button" data-show-count="false" data-lang="ko">@brispon 팔로우하기</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </li>
</ul>
<hr>
<div data-role="collapsible" data-content-theme="c">
  <h3>Information</h3>
  <p>
    Opening Time : {{ store.opening }}</br >
    Closing Time : {{ store.closing }}</br >
    Tel : {{ store.tel }}</br >
    Address : {{ store.addr }}</br >
  </p>
</div>
<div data-role="collapsible" data-content-theme="c">
   <h3>Map</h3>
   <p>
     <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
       <div id="map_canvas" style="height:300px;"></div>
     </div>
   </p>
</div>
<hr>
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Events <span class="ui-li-count">{{ store.event_set.all.count }}</span></li>
    {% for e in store.event_set.all %}
    <li><a href="{{ e.murl }}">
    <h3>{{ e.name }}</h3>
    <p><strong>{{ e.description }}</strong></p>
            <p>{{ e.description }}</p>
            <p class="ui-li-aside"><strong>{{ e.sdate }}~{{ e.edate }}</strong>PM</p>
        
    </a></li>
    {% endfor %}
</ul>

<div class="fb-comments" data-href="http://202.126.104.188/brispone/" data-num-posts="5" data-width="300"></div>
{% endblock %}
